<template>
	<gracePage headerBG="#FFFFFF" :bounding="false">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="appFn.navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">订单详情</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons my-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-flex-v1 pb-4">
			<view class="order-status text-center" v-if="index === '2'">
				<view class="mt-5 grace-flex-center text-center mb-2">
					<text class=" grace-icons icon-time2 grace-white grace-h3 mr-2" >&nbsp;&nbsp;&nbsp;</text>
					<text class="grace-h3 grace-white">待发货</text>
				</view>
				<text class="grace-white grace-h6">商家正在加速为你配货</text>
			</view>
			<view class="order-status text-center" v-if="index === '3'">
				<view class="mt-3 grace-flex-center text-center grace-flex-vcenter" >
					<text class="your-icon icondaishouhuo1 grace-white grace-h3 mr-2 mt-1">&nbsp;&nbsp;&nbsp;</text>
					<text class="grace-h3 grace-white">待收货</text>
				</view>
				<text class="grace-white grace-h6 pt-1">卖家已发货，物流配送中</text>
			</view>
		
			<view class="grace-list-items grace-tbr-large mx-2 grace-bg-white mt-3">
				<view class="grace-list-body ml-0 pl-2">
					<view class="grace-list-title">
						<text class="grace-list-title-text grace-bold">{{ info.consignee }}</text>
					</view>
					<view class="grace-list-body-desc grace-bold">{{ info.province_name }}{{ info.city_name }}{{ info.district_name }}{{ info.address }}</view>
					<view class="grace-wrap">
						<view class="grace-list-body-desc font-size-26 grace-bold pr-1">电话：</view>
						<view class="grace-list-body-desc">{{ info.mobile }}</view>
					</view>
				</view>
			</view>
			<divider></divider>
			<view class="grace-tbr-large grace-bg-white mx-2">
				<view class="m-2">
					<view class="grace-space-between pt-1">
						<text class="grace-h5">臻选优品</text>
						<text class="grace-h5 grace-black9">正品保证</text>
					</view>
					<view class="grace-list my-2" v-for="(goods, indexItem) in goods" :key="indexItem">
						<view class="grace-list-items">
							<view class="my-list-image ucenter-face grace-relative">
								<image class="my-list-image ucenter-face-image" :src="goods.goods_img" mode="widthFix"></image>
							</view>
							<view class="grace-list-body">
								<view class="grace-list-title">
									<text class="my-list-title-text grace-h4 grace-ellipsis">{{ goods.goods_name }}</text>
								</view>
								<view class="grace-list-title pb-1">
									<text class="my-list-title-text grace-black9 grace-text">{{ goods.goods_attr }}</text>
								</view>
								<view class="grace-space-between mt-1 grace-flex-vcenter">
									<text class="grace-h5 grace-red">￥{{ goods.goods_price }}</text>
									<text class="font-size-22 pr-2">x{{ goods.goods_number }}</text>
								</view>
							</view>
						</view>
						<view class="grace-flex-end">
							<view v-if="index === '2'">
								<button type="primary" v-if="goods.is_return == '-1'" class="grace-button my-footer-button my-1 grace-tbr-large" plain="true" @click="gotoReturnGoods(goods.rec_id,goods)">退款</button>
								<button type="primary" v-else class="grace-button my-footer-button2 my-1 grace-tbr-large grace-yellow" plain="true" style="border: 1rpx solid #FFCC00;">退款审核中</button>
							</view>
							<view v-if="index === '3'">
								<button type="primary" v-if="goods.is_return == '-1'" class="grace-button my-footer-button my-1 grace-tbr-large" plain="true" @click="gotoReturnGoods(goods.rec_id,goods)">退货</button>
								<button type="default" v-else class="grace-button my-footer-button2 my-1 grace-tbr-large grace-yellow" style="border: 1rpx solid #FFCC00;" plain="true">退货审核中</button>
							</view>
						</view>
					</view>
				<!-- 	<view class="grace-wrap">
						<text class="pr-1">买家留言 :</text>
						<view class="pl-1 lea-msg">
							<text class="grace-gray ">879999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999</text>
						</view>
					</view> -->
				</view>
			</view>
			<divider></divider>
			<view class="grace-tbr-large grace-bg-white mx-2" v-if="info.son_order_sn != ''">
				<view class="m-2">
					<view class="grace-space-between pt-1">
						<text class="grace-h5">关联订单</text>
					</view>
					<view class="grace-wrap">
						<text class="pr-1 width-250">订单金额</text>
						<view class="pl-3 lea-msg">
							<text class="grace-gray ">{{info.son_order_amount}}</text>
						</view>
					</view>
					<view class="grace-wrap">
						<text class="pr-1 width-250">订单编号</text>
						<view class="pl-3 lea-msg">
							<text class="grace-gray ">{{info.son_order_sn}}</text>
						</view>
					</view>
				</view>
			</view>
			<divider></divider>
			<view class="py-2 grace-tbr-large grace-bg-white mx-2">
				<view class="mx-2">
					<view class="grace-space-between pt-1">
						<text class="grace-h5">商品金额</text>
						<text class="grace-h5 grace-black9 grace-red">￥{{ info.is_free == '1' ? 0 : info.goods_amount }}</text>
					</view>
					<view class="grace-space-between pt-1">
						<text class="grace-h5">优惠金额</text>
						<text class="grace-h5 grace-black9">￥0</text>
					</view>
					<view class="grace-space-between pt-1" v-if="index === '3'">
						<text class="grace-h5">运费</text>
						<text class="grace-h5 grace-black9">￥{{info.shipping_fee}}</text>
					</view>
					<view class="grace-space-between pt-2" v-if="index === '3'">
						<text class="grace-h4">实付款</text>
						<text class="grace-h4 grace-black9 grace-red">￥{{info.order_amount}}</text>
					</view>
				</view>
			</view>
			<divider></divider>
			<view class="m-2" style="padding-bottom: 100rpx;">
				<view class="grace-wrap">
					<text class="pr-1 width-250">订单编号</text>
					<view class="pl-3 lea-msg">
						<text class="grace-gray ">{{info.order_sn}}</text>
					</view>
				</view>
				<view class="grace-wrap">
					<text class="pr-1">创建时间</text>
					<view class="pl-3 lea-msg">
						<text class="grace-gray ">{{info.add_time}}</text>
					</view>
				</view>
				<view class="grace-wrap">
					<text class="pr-1">快递公司</text>
					<view class="pl-3 lea-msg">
						<text class="grace-gray ">{{info.shipping_name}}</text>
					</view>
				</view>
				<view class="grace-wrap">
					<text class="pr-1">快递单号</text>
					<view class="pl-3 lea-msg">
						<text class="grace-gray ">{{info.invoice_no}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view slot="gFooter" class="grace-footer grace-flex-end" v-if="index === '3'">
			<view class="grace-flex-end" style="width:219rpx;">
				<button type="default" class="grace-button footer-btn mr-2 my-1 grace-tbr-large" plain="true" @tap="viewLogisticsFn">
					查看物流
				</button>
			</view>
			<view class="grace-flex-end" style="width:219rpx;">
				<button type="primary" class="grace-button footer-btn mr-2 my-1 grace-tbr-large"  plain="true" @tap="confirmReceiptFn" :loading="submitPay" :disabled="disabled">
					确认收货
				</button>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
export default {
	data() {
		return {
			// 得到商品id
			orderId: 0,
			// 得到状态列表 1待付款 2待发货 3待收货
			index:0,
			info: {},
			goods: [],
			// 静止点击
			disabled: false,
			// 按钮加载中
			submitPay:false,
			// 阻止页面多次打开
			oneGoStatus:true
		};
	},
	onShow() {
		uni.$on("editOrderStatus", () => {
			this.__init();
		    // 清除监听
		    uni.$off('editOrderStatus');
		})
	},
	onLoad: function(e) {
		this.orderId = e.orderId;
		this.index = e.index;
		this.__init();
	},

	methods: {
		async __init() {
			let options = {
				act: 'get_info',
				order_id: this.orderId
			};
			let data = await this.$HTTP.post('/api/api.php', options, { token: true });
			console.log('datsdasd', data);
			this.info = data.info;
			this.goods = data.goods;
		},
		// 查看物流
		viewLogisticsFn(){
			// 阻止多次跳转
			if(this.oneGoStatus){
				this.oneGoStatus = false;
				// 跳转页面
				uni.navigateTo({
					url: '/pages/order/orderLogistics/orderLogistics?orderId='+this.orderId,
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
		// 确认收货
		confirmReceiptFn(){
			this.$HTTP.post('/api/api.php', {act:'confirm',order_id: this.orderId}, { token: true });
			setTimeout(()=>{
				uni.navigateBack();
			},1500)
			// 返回上一个页面并传参
			uni.$emit("takeOverStatus");
			
		},
		// 前往退货/退款页面
		gotoReturnGoods(recId,item){
			// 阻止多次跳转
			if(this.oneGoStatus){
				this.oneGoStatus = false;
				// 跳转页面
				uni.navigateTo({
					url: '/pages/order/returnGoods/returnGoods?index='+this.index+'&id='+this.orderId+'&recid='+recId+'&item='+JSON.stringify(item),
					complete: () => {
						this.oneGoStatus = true;
					}
				});
			}
		},
	},

	components: { gracePage }
};
</script>
<style scoped>
.order-status {
	background-image: url(/static/images/order-bg.png);
	background-size: 100% 100%;
	height: 228rpx;
	width: 750rpx;
}
.my-list-image {
	width: 154rpx;
	height: 154rpx;
}

.my-list-title-text {
	display: block;
	line-height: 40rpx;
}
.my-footer-button {
	/* width: 139rpx; */
	height: 51rpx;
	padding: 0rpx 20rpx;
	line-height: 51rpx;
	font-size: 28rpx;
	text-align: center;
}
.my-footer-button2 {
	width: 179rpx;
	height: 51rpx;
	padding: 0rpx 20rpx;
	line-height: 51rpx;
	font-size: 28rpx;
	text-align: center;
}
.text-overflow {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.lea-msg {
	width: 520rpx;
	display: inline-block;
	word-wrap: break-word;
}
.footer-btn{
	width: 210rpx;
	height: 94rpx;
	line-height: 94rpx;
	font-size: 30rpx;
	text-align: center;
}

</style>
